<template>
    <div id="operationPayrollForm">
        <!-- 表单内容 -->
        <div class="operationPayroll-forms">
            <el-form :model="payrollForm"  ref="payrollForm" label-width="120px" class="demo-ruleForm" :disabled="myDisabled">
                <el-form-item label="员工姓名" prop="staffName" :class="starCss" >
                    <el-input v-model="payrollForm.staffName" @change="fn"></el-input>
                </el-form-item>
                <el-form-item label="客户工号" prop="clientJobNumber" :class="starCss">
                    <el-input v-model="payrollForm.clientJobNumber" @change="fn"></el-input>
                </el-form-item>

                <el-form-item label="证件号码" prop="idNumber" :class="starCss">
                    <el-input v-model="payrollForm.idNumber" @change="fn"></el-input>
                </el-form-item>

                <el-form-item label="手机号码" prop="mobile" :class="starCss">
                    <el-input v-model="payrollForm.mobile" @change="fn"></el-input>
                </el-form-item>

                <el-form-item label="开户行" prop="bank" :class="starCss">
                    <el-input v-model="payrollForm.bank" @change="fn"></el-input>
                </el-form-item>

                <el-form-item label="银行卡号" prop="cardNo" :class="starCss">
                    <el-input v-model="payrollForm.cardNo" @change="fn"></el-input>
                </el-form-item>

                <el-form-item label="顺丰金融账号" prop="financialAccount" :class="starCss">
                    <el-input v-model="payrollForm.financialAccount" @change="fn"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    props:["myDisabled","starCss","payrollData"],
    data() {
        return {
            // input的值
            payrollForm: {
                staffName: "",            // 员工姓名
                clientJobNumber: "",      // 客户工号
                idNumber: "",             // 证件号码
                mobile: "",               // 手机号
                bank:"",                  // 开户银行
                cardNo:"",                // 银行卡号
                financialAccount:"",      // 顺丰金融账号
            },  
        }
    },
    methods: {
        fn(){
            this.$store.commit("modifyData",this.payrollForm)
        }
    },
    updated() {
        this.payrollForm = this.payrollData;
    },
    
}
</script>

<style lang="less" scoped>
#operationPayrollForm{
    background-color: #ffffff;
    // 表单内容
    .operationPayroll-forms{
        width: 95%;
        margin: 0 auto;
        margin-top: 40px;
        .el-form{
            display: flex;
            width: 90%;
            margin: 0 auto;
            justify-content: space-between;
            flex-wrap: wrap;
            
            /deep/ .el-form-item__content{
                width: 400px;
            }
            .star{
                /deep/ .el-form-item__label::after{
                    content: "*";
                    color: #F56C6C;
                    margin-left: 4px;
                }
            }

             /deep/ .el-form-item__label::before{
                content: "";
            }
        }
     
    }
}
</style>